import { defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
import { focusStore, switchStore } from "../../store";
import { TypeKeys, TypeWidgetChangeType, TypeWidgetItem } from "@/focus/type";
import { isInViewport } from "@/focus/path/until";

export default defineComponent({
  name: "focus-switch",
  emits: ["enter", "back"],
  props: {
    focusId: {
      type: String,
      default: ""
    },
    keyBoardLock: {
      type: Boolean,
      default: false,
    },
    //有弹窗处于显示状态时是否锁住键盘
    popupKeyBoardLook: {
      type: Boolean,
      default: true,
    },
    onEnter: {
      type: Function,
      default: () => { }
    },
    onBack: {
      type: Function,
      default: () => { }
    },
  },

  setup(props, { emit }) {
    const domRef = ref<HTMLElement>()
    const _provide = switchStore.provide()
    const focusInject = focusStore.inject()
    _provide.listenerWidget(_provide.state.switchId, onListenerWidget)
    function changeFocusIdByProps() {
      if (props.focusId === _provide.state.focusId.value) return
      if (props.focusId) _provide.changeFocus(props.focusId)
    }
    watch(() => props.focusId, changeFocusIdByProps, { immediate: true })
    function onListenerWidget(item: TypeWidgetItem, type: TypeWidgetChangeType, oldItem?: TypeWidgetItem) {
      const _state = _provide.state
      if (type === "create") {
        if (_state.widgetList.find(v => v.uid === _state.focusId.value)) return
        _provide.changeFocus(item.uid)
        return
      }
      if (type === "change") {
        if (_state.focusId.value === oldItem?.uid) _provide.changeFocus(item.uid)
        return
      }
      if (type === "delete") {
        if (_state.widgetList.length === 0) return
        if (_state.focusId.value === item.uid) {
          _provide.changeFocus(_state.widgetList[0].uid)
        }
      }
    }
    function onSwitchKeyDown(key: keyof TypeKeys, keyEv: KeyboardEvent) {
      if (!domRef.value) return
      const _isViseble = isInViewport(domRef.value)
      //判断当前组件是否被隐藏，如果被隐藏，则不监听按键
      if (!_isViseble) return
      if (props.keyBoardLock === true) return
      const _keyboard = focusInject.state.keys
      //如果页面中有弹窗处于显示状态，并且指定弹窗显示状态也需要锁住键盘时，则不监听按键
      if (props.popupKeyBoardLook && focusInject.state.popupList.value.find(v => v.visible)) return
      _provide.changekeyValue(key, keyEv)
      if (keyEv.keyCode === _keyboard.ENTER) emit("enter")
      if (keyEv.keyCode === _keyboard.BACK) emit("back")
      console.time()
      switchStore.onKeyMove(keyEv, _provide, {
        keyboard: _keyboard,
        key,
      })
      console.timeEnd()
    }
    onMounted(() => {
      focusInject.listenerKeyDown(_provide.state.switchId, onSwitchKeyDown)
    })
    onUnmounted(() => {
      _provide.unListenerWidget(_provide.state.switchId)
      focusInject.unListenerKeyDown(_provide.state.switchId)
    })
    return {
      domRef
    }
  },

  render() {
    return (
      <div ref="domRef">
        {this.$slots.default}
      </div>
    );
  }
})
